<section [formGroup]="createAlarmConfigForm" fxLayout="column">
  <mat-checkbox formControlName="useMessageAlarmData">
    {{ 'tb.rulenode.use-message-alarm-data' | translate }}
  </mat-checkbox>
  <mat-checkbox formControlName="overwriteAlarmDetails" *ngIf="createAlarmConfigForm.get('useMessageAlarmData').value === true">
    {{ 'tb.rulenode.overwrite-alarm-details' | translate }}
  </mat-checkbox>
  <section fxLayout="column" *ngIf="createAlarmConfigForm.get('useMessageAlarmData').value === false ||
                                    createAlarmConfigForm.get('overwriteAlarmDetails').value === true">
    <tb-script-lang formControlName="scriptLang" *ngIf="tbelEnabled"></tb-script-lang>
    <tb-js-func *ngIf="createAlarmConfigForm.get('scriptLang').value === scriptLanguage.JS"
                #jsFuncComponent
                formControlName="alarmDetailsBuildJs"
                functionName="Details"
                [functionArgs]="['msg', 'metadata', 'msgType']"
                helpId="rulenode/create_alarm_node_script_fn"
                noValidate="true">
      <button toolbarSuffixButton
              mat-icon-button
              matTooltip="{{ testScriptLabel | translate }}"
              matTooltipPosition="above"
              class="tb-mat-32"
              (click)="testScript()">
        <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
      </button>
    </tb-js-func>
    <tb-js-func *ngIf="createAlarmConfigForm.get('scriptLang').value === scriptLanguage.TBEL"
                #tbelFuncComponent
                formControlName="alarmDetailsBuildTbel"
                functionName="Details"
                [functionArgs]="['msg', 'metadata', 'msgType']"
                [disableUndefinedCheck]="true"
                [scriptLanguage]="scriptLanguage.TBEL"
                helpId="rulenode/tbel/create_alarm_node_script_fn"
                noValidate="true">
      <button toolbarSuffixButton
              mat-icon-button
              matTooltip="{{ testScriptLabel | translate }}"
              matTooltipPosition="above"
              class="tb-mat-32"
              (click)="testScript()">
        <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
      </button>
    </tb-js-func>
    <div fxLayout="row" style="padding-bottom: 16px;">
      <button mat-button mat-raised-button color="primary" (click)="testScript()">
        {{ testScriptLabel | translate }}
      </button>
    </div>
  </section>
  <section fxLayout="column" *ngIf="createAlarmConfigForm.get('useMessageAlarmData').value === false">
    <mat-form-field fxFlex subscriptSizing="dynamic">
      <mat-label translate>tb.rulenode.alarm-type</mat-label>
      <input required matInput formControlName="alarmType">
      <mat-error *ngIf="createAlarmConfigForm.get('alarmType').hasError('required')">
        {{ 'tb.rulenode.alarm-type-required' | translate }}
      </mat-error>
      <mat-hint translate>tb.rulenode.general-pattern-hint</mat-hint>
    </mat-form-field>
    <mat-checkbox formControlName="dynamicSeverity">
      {{ 'tb.rulenode.use-alarm-severity-pattern' | translate }}
    </mat-checkbox>
    <mat-form-field fxFlex *ngIf="!createAlarmConfigForm.get('dynamicSeverity').value">
      <mat-label translate>tb.rulenode.alarm-severity</mat-label>
      <mat-select formControlName="severity" required>
        <mat-option *ngFor="let severity of alarmSeverities" [value]="severity">
          {{ alarmSeverityTranslationMap.get(severity) | translate }}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="createAlarmConfigForm.get('severity').hasError('required')">
        {{ 'tb.rulenode.alarm-severity-required' | translate }}
      </mat-error>
    </mat-form-field>
    <mat-form-field fxFlex *ngIf="createAlarmConfigForm.get('dynamicSeverity').value" subscriptSizing="dynamic">
      <mat-label translate>tb.rulenode.alarm-severity-pattern</mat-label>
      <input matInput formControlName="severity" required>
      <mat-error *ngIf="createAlarmConfigForm.get('severity').hasError('required')">
        {{ 'tb.rulenode.alarm-severity-required' | translate }}
      </mat-error>
      <mat-hint [innerHTML]="'tb.rulenode.alarm-severity-pattern-hint' | translate | safe: 'html'"></mat-hint>
    </mat-form-field>
    <mat-checkbox formControlName="propagate">
      {{ 'tb.rulenode.propagate' | translate }}
    </mat-checkbox>
    <section *ngIf="createAlarmConfigForm.get('propagate').value === true">
      <mat-form-field floatLabel="always" class="mat-block" subscriptSizing="dynamic">
        <mat-label translate>tb.rulenode.relation-types-list</mat-label>
        <mat-chip-grid #relationTypesChipList>
          <mat-chip-row
            *ngFor="let key of createAlarmConfigForm.get('relationTypes').value;"
            (removed)="removeKey(key, 'relationTypes')">
            {{key}}
            <mat-icon matChipRemove>close</mat-icon>
          </mat-chip-row>
          <input matInput type="text" placeholder="{{'tb.rulenode.relation-types-list' | translate}}"
                 [matChipInputFor]="relationTypesChipList"
                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                 (matChipInputTokenEnd)="addKey($event, 'relationTypes')"
                 [matChipInputAddOnBlur]="true">
        </mat-chip-grid>
        <mat-hint translate>tb.rulenode.relation-types-list-hint</mat-hint>
      </mat-form-field>
    </section>
    <mat-checkbox formControlName="propagateToOwner">
      {{ 'tb.rulenode.propagate-to-owner' | translate }}
    </mat-checkbox>
    <mat-checkbox formControlName="propagateToTenant">
      {{ 'tb.rulenode.propagate-to-tenant' | translate }}
    </mat-checkbox>
  </section>
</section>
